<template>
    <van-dialog :show="show" title=" " destroy-on-close class-name="custom-dialog"
        overlay-class="activity-dialog-overlay" teleport="body" :show-confirm-button="false" :show-cancel-button="true"
        @cancel="emit('close')">
        <div class="item-box">
            <div v-for="(item, index) in datas" :key="index" class="item">
                <div class="title">
                    {{ item.title }}
                </div>
                <div class="amount">
                    {{ apo.utils.formateAmountWithSymbol(item.amount) }}
                </div>
                <div class="button" v-click-move @click="item.callback">
                    {{ $t('activity.checkin.check_in') }}
                </div>
                <div class="icon">
                    <img :src="item.icon" alt="">
                </div>
                <template v-if="index === 0">
                    <img class="icon-img" src="/images/activity/checkin/Title_04.png" alt="">
                </template>
            </div>
            <div class="desc">
                {{ $t('activity.checkin.check_desc_1') }}
                <span>
                    {{ apo.utils.formateAmountWithSymbol(activityData.recharge_cond || 0) }}
                </span>
                {{ $t('activity.checkin.check_desc_2') }}
            </div>
        </div>
    </van-dialog>
</template>

<script setup lang="ts">
const props = defineProps(['show', 'activityData'])
const emit = defineEmits(['close', 'checkIn', 'deposite'])

// 根据 props 实时生成选项，确保数据变化后 UI 同步
const datas = computed(() => ([
    {
        title: $t('activity.checkin.check_1'),
        amount: props.activityData.free_bonus || 0,
        icon: '/images/activity/cp/Title_03.png',
        callback() {
            emit('checkIn')
        }
    },
    {
        title: $t('activity.checkin.check_2'),
        amount: props.activityData.recharge_bonus || 0,
        icon: '/images/activity/checkin/Title_02.png',
        callback() {
            emit('deposite')
        }
    }
]))
</script>

<style scoped lang="scss">
.item-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

.item {
    height: 3rem;
    background-color: #2C1D31;
    width: calc(100% - 0.8rem);
    border-radius: 0.4rem;
    border: 0.01rem solid var(--border-color);
    position: relative;
    padding-left: .4rem;

    &:nth-child(2) {
        margin-top: 1rem;

        .title {
            color: #FFE0A7;
        }
    }

    .title {
        color: #fff;
        font-size: .32rem;
        margin-top: 0.3rem;
    }

    .amount {
        color: #FDD528;
        font-size: .46rem;
        margin-top: 0.3rem;
    }

    .button {
        background-color: #FFD700;
        color: #3B1D33;
        display: inline-block;
        font-size: .36rem;
        padding: .2rem .5rem;
        border-radius: .2rem;
        margin-top: .2rem;
    }

    .icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 4.2rem;

        img {
            width: 100%;
        }
    }
}

.reward-img {
    position: absolute;
    bottom: -1rem;
    right: 0;
    width: 1.5rem;

    img {
        width: 100%;
    }

    span {
        position: absolute;
        bottom: 0.4rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: .32rem;
        color: #fff;
        font-weight: 700;
    }
}

.icon-img {
    position: absolute;
    bottom: -1.4rem;
    right: 2rem;
    width: 1rem;
    z-index: 2;

    img {
        width: 100%;
    }
}

.desc {
    color: #FFCEF4;
    margin-top: .5rem;
    width: 5.6rem;
    text-align: center;
    line-height: 0.3rem;
    font-size: .3rem;
    line-height: .36rem;

    span {
        color: #FFD88A;
    }
}
</style>